<template>
  <div style="margin: 5px 0 0 10px" v-if="thing">
    <a-tabs default-active-key="100">
      <a-tab-pane tab="设备视图" key="100">
        <thing-view :thing="thing"></thing-view>
      </a-tab-pane>
      <a-tab-pane tab="视频" key="1" v-if="isVideo">
        {{ thing.s_name }}
        <a-button @click="refreshVideoOptions">获取视频地址</a-button>
        {{ videoIndex }}
        <a-select v-model="videoIndex" style="width: 220px" allowClear>
          <a-select-option
            style="width: 300px"
            v-for="(item, index) in videos"
            :key="index"
            :value="index"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-popconfirm>
          <template slot="title">
            <p>{{ videos }}</p>
          </template>
          <a-button :disabled="videoIndex == undefined">详细信息</a-button>
        </a-popconfirm>

        <a-button :disabled="videoIndex == undefined" @click="play"
          >播放</a-button
        >
        <a-button @click="stop">停止</a-button>

        <div id="videownd" @scroll="onSizeChanged">
          <video
            v-if="0"
            name="videoElement"
            class="centeredVideo"
            id="videoElement"
            controls
            width="1024"
            height="576"
            autoplay
          >
            Your browser is too old which doesn't support HTML5 video.
          </video>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="数据">
        <a-form-model layout="inline">
          <a-form-model-item label="属性">
            <a-select
              style="width: 220px"
              v-model="currentPID"
              :labelInValue="true"
            >
              <a-select-option
                v-for="item in properties"
                :key="item.identifier"
                :value="item.identifier"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-range-picker
              v-if="queryHistroryData"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              :placeholder="['开始时间', '结束时间']"
              @change="onChange"
              @ok="onOk"
            />
            <a-button :disabled="currentPID == null" @click="queryData"
              >查询</a-button
            >
          </a-form-model-item>
        </a-form-model>
        <a-tabs default-active-key="1" @change="onTypeChanged">
          <a-tab-pane tab="数据" key="1">
            <a-table
              :columns="columns"
              :data-source="datas"
              :row-key="
                (r, index) => {
                  return index;
                }
              "
            >
              <div
                slot="filterDropdown"
                slot-scope="{
                  setSelectedKeys,
                  selectedKeys,
                  confirm,
                  clearFilters,
                  column,
                }"
                style="padding: 8px"
              >
                <a-input
                  v-ant-ref="(c) => (searchInput = c)"
                  :placeholder="`Search ${column.dataIndex}`"
                  :value="selectedKeys[0]"
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="
                    (e) =>
                      setSelectedKeys(e.target.value ? [e.target.value] : [])
                  "
                  @pressEnter="
                    () => handleSearch(selectedKeys, confirm, column.dataIndex)
                  "
                />
                <a-button
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="
                    () => handleSearch(selectedKeys, confirm, column.dataIndex)
                  "
                >
                  Search
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="() => handleReset(clearFilters)"
                >
                  Reset
                </a-button>
              </div>
              <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />
              <template
                slot="customRender"
                slot-scope="text, record, index, column"
              >
                <span v-if="searchText && searchedColumn === column.dataIndex">
                  <template
                    v-for="(fragment, i) in text
                      .toString()
                      .split(
                        new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')
                      )"
                  >
                    <mark
                      v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                      :key="i"
                      class="highlight"
                      >{{ fragment }}</mark
                    >
                    <template v-else>{{ fragment }}</template>
                  </template>
                </span>
                <template v-else>
                  {{ text }}
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane tab="曲线" key="2">
            <div
              id="chart"
              ref="chart"
              style="width: 600px; height: 460px"
            ></div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
let echarts = require("echarts");
//let flvjs = require("@/services/player/flv.js");
import { playVideo, stopVideo, move, hidePlayer } from "@/utils/videoplay.js";

import {
  getRealData,
  getHistroyData,
  getVideoOptions,
} from "@/services/dataAPI";
import ThingView from "@/components/data/view/ThingView";

const columns = [
  {
    title: "值",
    dataIndex: "sv",
  },
  {
    title: "采集时间",
    dataIndex: "picktime",
  },
  {
    title: "名称",
    dataIndex: "pn",
    key: "name",
  },

  {
    title: "子属性",
    dataIndex: "sname",
    scopedSlots: {
      filterDropdown: "filterDropdown",
      filterIcon: "filterIcon",
      customRender: "customRender",
    },
    onFilter: (value, record) =>
      record.sname.toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => {
          this.searchInput.focus();
        });
      }
    },
  },
  {
    title: "索引",
    dataIndex: "pi",
    scopedSlots: {
      filterDropdown: "filterDropdown",
      filterIcon: "filterIcon",
      customRender: "customRender",
    },
    onFilter: (value, record) =>
      record.pi.toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => {
          this.searchInput.focus();
        });
      }
    },
  },
];
export default {
  components: {
    ThingView,
  },
  props: ["thing", "queryHistroryData"],
  watch: {
    thing: function (val) {
      this.refreshVideoOptions();
    },
  },
  computed: {
    properties() {
      if (this.thing && this.thing.model) {
        return this.thing.model.obody.properties;
      }
      return [];
    },

    videos() {
      return this.videoStream
        ? this.videoStream.stream_options
          ? this.videoStream.stream_options
          : []
        : [];
    },

    isVideo() {
      if (this.thing && this.thing.model) {
        //var streams = [];
        var _this = this;
        let res = false;
        this.thing.model.obody.properties.forEach((p) => {
          if (p.identifier !== _this.currentPID.key) {
            res = true;
            return;
          }
          if (p.data_type.type == "stream") {
            res = true;
            return true;
          } else {
            if (p.data_type.type == "struct" || p.data_type.type == "array") {
              if (p.data_type.specs.item.type == "stream") {
                res = true;
              }
            }
          }
        });
        return res;
      }
      return false;
    },
  },

  mounted() {
    //window.addEventListener('scroll',this.onSizeChanged,true)
    window.addEventListener('beforeunload', this.beforeunloadHandler)
    document.addEventListener("visibilitychange",this.beforeunloadHandler)
    let _this = this
    setInterval(() => {
      _this.onSizeChanged();
    }, 800);
  },
  destroyed(){
     window.removeEventListener('beforeunload', this.beforeunloadHandler)
     document.removeEventListener("visibilitychange",this.beforeunloadHandler)
  },
  data() {
    return {
      datas: [],
      columns,
      isLoadWatcher: false,
      currentPID: {},
      dateRange: [],
      chart: null,
      //videoID: "",
      searchText: "",
      videoCount: 0,
      uris: [],
      flvPlayer: null,
      recordOldValue: {
        // 记录下旧的宽高数据，避免重复触发回调函数
        width: "0",
        height: "0",
      },
      observer: null,
      playing: false,
      //videoAddr: "",
      videoIndex: undefined,
      videoStream: [],
      chartOption: {
        tooltip: {
          trigger: "axis", // 显示横坐标值
        },
      },
    };
  },
  methods: {
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
    },

    handleReset(clearFilters) {
      clearFilters();
      this.searchText = "";
    },
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart);
      }
    },
    beforeunloadHandler(e) {
      console.log("^^^^^^^^^^^^^^^vchanged^",e)
      if(document.visibilityState == 'visible'){
        console.log("^^^^^^^^^show^^^^^^vchanged^")
        this.onSizeChanged()
      }else{
        console.log("^^^^^^^^^hide^^^^^^vchanged^")
        this.onHide()
      }
    },
    onHide(){
      hidePlayer()
    },
    onSizeChanged() {
      //if (this.recordOldValue) {

      let element = document.querySelector("#videownd");
      if(!element){
        return
      }
      let newPos = this.calcRect(element)
      let equal =
        this.recordOldValue.x == newPos?.x &&
        this.recordOldValue.y == newPos?.y &&
        this.recordOldValue.width == newPos.width &&
        this.recordOldValue.height == newPos.height;
      if (!equal) {
        move(newPos);
        console.log("-----move to--------",newPos)
        this.recordOldValue = newPos;
      }
      //}
    },
    /*initPlayer(element) {
      if (this.isLoadWatcher) {
        return;
      }
      /*let _this = this;
      console.log("******initPlayer********", element);
      const resizeObserver = new ResizeObserver((entries) => {
        //回调
        _this.onSizeChanged(element);
      });
      resizeObserver.observe(element);*/

    //监听对应的dom

    //this.isLoadWatcher = true;
    //},
    refreshVideoOptions() {
      if (this.thing) {
        const _this = this;
        getVideoOptions(this.thing.uid)
          .then((option) => {
            _this.videoStream = option;
            _this.videoIndex = undefined;
            console.log("***get option********", option);
          })
          .catch((err) => {
            _this.videoStream = undefined;
            _this.videoIndex = undefined;
            console.log("***********", err);
          });
      }
    },
    onTypeChanged(key) {
      if (key == "2") {
        let _this = this;
        setTimeout(() => {
          _this.initChart();
          _this.handleData(this.datas);
        }, 300);
      }
    },
    handleData(data) {
      this.datas = data;
      if (this.datas) {
        this.datas.sort((a, b) => {
          return a.pick_time - b.pick_time;
        });
      }
      if (this.chart) {
        this.initChart();
        let series = {};
        this.chartOption.xAxis = {
          type: "time",
          splitLine: {
            show: false,
          },
        };
        this.chartOption.yAxis = { type: "value" };
        data.forEach((element) => {
          let id =
            element.tid +
            "_" +
            element.pi +
            "_" +
            element.pid +
            "_" +
            element.sid;
          //element[id] = id
          if (!series[id]) {
            series[id] = {
              type: "line",
              data: [],
              name: element.pn + "#" + element.pi + "#" + element.sname,
            };
          }

          series[id].data.push([element.picktime, element.value]);
        });
        this.chartOption.series = [];
        this.chartOption.legend = { data: [] };
        for (let s in series) {
          this.chartOption.series.push({
            name: series[s].name,
            data: series[s].data,
            type: "line",
          });
          this.chartOption.legend.data.push(series[s].name);
        }
        this.chartOption.legend.data.sort((a, b) => {
          let al = a.length;
          let bl = b.length;
          return al == bl ? (a > b ? 1 : -1) : al - bl;
        });
        this.chartOption.series.sort((a, b) => {
          let al = a.name.length;
          let bl = b.name.length;
          return al == bl ? (a.name > b.name ? 1 : -1) : al - bl;
          //return a.name > b.name ? 1: -1
        });
        this.chart.setOption(this.chartOption);
      }
    },
    queryData() {
      return this.queryHistroryData
        ? this.getHistroyData()
        : this.queryRealData();
    },
    queryRealData() {
      let _this = this;

      getRealData(this.thing.uid, this.currentPID.key, "", -1).then((data) => {
        //let series = {};
        _this.handleData(data);
      });
    },
    getHistroyData() {
      let _this = this;

      getHistroyData(
        this.thing.uid,
        this.currentPID.key,
        "",
        -1,
        this.dateRange[0],
        this.dateRange[1]
      ).then((data) => {
        _this.handleData(data);
      });
    },
    onChange(value, dateString) {
      this.dateRange = dateString;
      console.log("Selected Time: ", value);
      console.log("Formatted Selected Time: ", dateString);
    },
    onOk(value) {
      console.log("onOk: ", value);
    },
    calcRect(playerWnd){
       var pos = playerWnd.getBoundingClientRect();
        //this.recordOldValue = pos;
        //console.log("*********pos********", pos);
        pos.x = Math.max(pos.x , 0)
        pos.y = Math.max(pos.y , 80)
        
        pos.title = document.title
        pos.width = Math.min(document.body.offsetWidth - pos.x, pos.width);
        pos.height =  Math.min(document.body.offsetHeight - pos.y - 20, pos.height);
        return pos
        
    },
    play() {
      /*
      var videoElement = document.getElementById("videoElement");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        hasVideo: true,
        enableStashBuffer: true,
        url: this.videoAddr,
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.on("scriptdata_arrived", function (e) {
        if (e.onTimeUpdate) {
          console.log("on script data ....." + e.onTimeUpdate.abstime);
        }
      });
      this.flvPlayer.load();
      this.flvPlayer.play();*/
      let playerWnd = document.querySelector("#videownd");
      if (playerWnd) {
        document.title = "player..." + Math.random().toString(36).substr(3, 10);
        let pos = this.calcRect(playerWnd)
         this.recordOldValue = pos;
       
        //console.log("*********pos********", pos);
       
        /*let left = document.documentElement
          ? document.documentElement.scrollLeft
          : 0;
        let top = document.documentElement
          ? document.documentElement.scrollTop
          : 0;
        console.log(
          "*********pos********",
          pos,
          left,
          top,
          document.documentElement.clientTop
        );
        console.log(
          "^^^^^^^^^^^^^^^^",
          playerWnd.parentElement.offsetTop,
          playerWnd.offsetParent.offsetTop,
          playerWnd.scrollTop,
          playerWnd.offsetTop
        );*/
        playVideo(
          this.thing.s_name,
          this.videos[this.videoIndex].name,
          this.thing.proxy_thing_id,
          this.videos[this.videoIndex].raw_addr,
          process.env.VUE_APP_TYPE === "cloud",
          {
            title: document.title,
            w: pos.width,
            h: pos.height,
            x: pos.left,
            y: pos.top,
          }
        );
        this.playing = true;
        //this.initPlayer(playerWnd);
      }
    },
    stop() {
      this.playing = false;
      stopVideo();
      /*if (this.flvPlayer) {
        
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }*/
    },
  },
};
</script>
<style scoped>
#videownd {
  margin-top: 15px;
  width: 600px;
  height: 100vh;
  overflow: auto;
}
</style>